<template>
    <view class="bs">
        <div class="bs_top">
            <div
                class="bs_top_li"
                v-for="(item, index) in itemslist"
                @click="gitActive(index)"
                :class="active==index?'top_active':''"
                :key="index"
            >{{item}}</div>
        </div>
        <record v-if="active==0" />
        <curve v-else-if="active==1" />
        <chart-form v-else-if="active==2" />
        <toll v-else-if="active==3" />
    </view>
</template>
<script>
import record from "./bscomponents/record.vue";
import curve from "./bscomponents/curve.vue";
import chartForm from "./bscomponents/chartForm.vue";
import toll from "./bscomponents/toll.vue";
export default {
    data() {
        return {
            itemslist: ["记录", "曲线", "表格", "统计"],
            active: 0,
            token:'',
        };
    },
    components: {
        record,curve,chartForm,toll
    },
    onLoad(option){
         var _this = this;
        // console.log(option)
        if(option.token){
            uni.setStorage({
                //存储到本地
                key: "hospital",
                data: {gatewayAddress:'http://183.11.235.36:25555'}
            });
            uni.setStorage({
                //存储到本地
                key: "token",
                data: {token:option.token}
            });
            _this.token=option.token
        }
    },
    mounted() {},
    methods: {
         gotoHomePage(){
           if(this.token){
                window.history.back();
           }
        },
        gitActive(index) {
            this.active = index;
        },
    },
};
</script>
<style scoped lang="scss">
.bs {
    height: 100vh;
    padding-top: 44px;
    margin-top: -44px;
    background: #f8f8f8;
    .bs_top {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        text-align: center;
        background: #fff;
        font-size: 28upx;
        .bs_top_li {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            height: 88upx;
            line-height: 88upx;
            color: #333;
        }
        .top_active {
            color: #fa4d93;
            position: relative;
            
        }
        .top_active::after {
            content: "";
            position: absolute;
            bottom: 16upx;
            height: 2upx;
            left: 50%;
            margin-left: -30upx;
            width: 60upx;
            border-top: 1px solid #fa4d93;
        }
    }
}
</style>